<!-- @format -->

<script setup>
	import { ref } from 'vue'
	const visible = ref(false)
</script>

<template>
	<div class="panel">
		<div
			class="title"
			:style="{
				borderBottomColor: visible ? 'transparent' : '#ccc'
			}">
			<h4>自由与爱情</h4>
			<span
				class="btn"
				@click="visible = !visible">
				收起
			</span>
		</div>
		<div
			class="container"
			v-show="visible">
			<!-- 在组件标签不确定的位置，用 slot 占位 -->
			<!-- 
        slot：Vue的内置组件，也是一个抽象组件(不会出现在真实DOM树)，拿来就用，代表是一个占位符
       -->
			<slot></slot>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.panel {
		margin-bottom: 10px;
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 1em;
			border: 1px solid #ccc;
		}
		.title h4 {
			line-height: 2;
			margin: 0;
		}
		.container {
			border: 1px solid #ccc;
			padding: 10px 15px;
		}
		.btn {
			cursor: pointer;
		}
	}
</style>
